<template>
    <div>
        <table border="1" width="100%">
            <tr>
                <td>序号</td>
                <td>名称</td>
                <td>单价</td>
                <td>加入购物车</td>
            </tr>
            <tr v-for="(item,i) in shop" :key="item.id">
                <td>{{i+1 }}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <button>添加购物车</button>
            </tr>
        </table>
    </div>
</template>

<script>
import {mapState} from "vuex"
    export default {
        computed:{
            ...mapState(['shop'])
        }
    }
</script>

<style scoped>

</style>